﻿<%@ Page Title="" Language="C#" MasterPageFile="~/PIMMobile.master" AutoEventWireup="true" CodeFile="NewMealPlan.aspx.cs" Inherits="NewMealPlan" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script src="Scripts/jquery.min.js" type="text/javascript" > </script>
    <link href="Styles/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.validationEngine.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validationEngine-en.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.theme.css" />
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/demos/demos.css" />
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.all.css" />
    <link rel="stylesheet" href="jquery/jRating.jquery.css" type="text/css" />
    <script type="text/javascript" src="jquery/jRating.jquery.js"></script>
    <script src="Scripts/vpb_script.js" language="javascript" type="text/javascript" > </script>
    <script src="Scripts/jquery.slimscroll.js" language="javascript" type="text/javascript"></script>

    <script type="text/javascript">
    function loadRecipes() {
        var ReiceIdSession = '<%=Session["RecipeOfMealPlan"]%>';
        if (ReiceIdSession != '') {
            var RecipeIDList = ReiceIdSession.split(',');
            for (var a = 0; a < RecipeIDList.length; a++) {
                if (RecipeIDList[a] != '') {
//                    if (a == 0) {
//                        document.getElementById("<% =hdRecipeId.ClientID %>").value = RecipeIDList[a] + ',';
//                    } else
                    document.getElementById("<% =hdRecipeId.ClientID %>").value = document.getElementById("<% =hdRecipeId.ClientID %>").value + RecipeIDList[a] + ',';
                    alert(document.getElementById("<% =hdRecipeId.ClientID %>").value);
                    $.ajax({
                        type: "POST",
                        url: "PIMServices.asmx/GetRecipeUserByRecipe",
                        data: "{'RecipeId':'" + parseInt(RecipeIDList[a], 10) + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            //alert(response.d);
                            BindRecipe(response);
                        },
                        error: function (msg) { alert(msg.constructor) }
                    });
                }
            }
        }
    }

    function RemoveIngredient(recipeId) {
        if (confirm('Do you want to remove this Recipe?')) {
            $("#li_" + recipeId + "").remove();
            document.getElementById("<% =hdRecipeId.ClientID %>").value = document.getElementById("<% =hdRecipeId.ClientID %>").value.replace(recipeId + ',', '');
            alert(document.getElementById("<% =hdRecipeId.ClientID %>").value);
        }
    }

    function BindRecipe(response) {
        var recipe = response.d;
        var html = "";
//        for (var i = 0; i < recipe.length; i++) {
            var varObjectID = recipe.RecipeID;
            var varObjectName;
            var varObjectNameFull;
            if (recipe.RecipeName != null) {

                varObjectName = recipe.RecipeName.substring(0, 10);
                if (varObjectName.length > 10) varObjectName = varObjectName + ' ..';
                varObjectNameFull = recipe.RecipeName;
            }
            else {
                varObjectName = 'No Name..';
                varObjectNameFull = 'No Name';
            }
            var varObjectImage = recipe.RecipeImage;
            if (varObjectImage != null) {
                var recipeID = varObjectID + ',';

                html += '<li id="li_' + varObjectID + '" class="ui-widget-content ui-corner-tr form-row-image">'
                html += '<a id="' + varObjectID + '" class="none-decoration" ' + varObjectID + '">' + varObjectName + '</a>';
                html += '<img class="tooltip"  id="' + varObjectID + '" height="72" width="88" alt="' + varObjectNameFull + '" serving="' + 1000 + '" src="data:image/jpeg;charset=utf-8;base64,' + varObjectImage + '" style="display: inline-block; height: 72px;" title="<b>Description: </b>' + varObjectNameFull + '</br><b>Author: </b>">';
                html += '<p>';
//                if (userid != '') {
                    html += '<div><img src="images/img05.jpg" alt="" style="float:right; width="20" height="3" onclick="javascript:RemoveIngredient(' + varObjectID + ');">';
                    html += '</img></div>';
//                }
                html += '</p>';

                html += '</li>'
//            }
        }
            $('#gallery').append(html);
        //init_tooltip();
    }

    $(document).ready(function () {
        jQuery(".form").validationEngine({ scroll: false, focusFirstField: false });
        $('#primary-main').slimscroll({
            size: '15px',
            height: '150px'
        });
        loadRecipes();
        initRating();
    });
    </script>
<script type="text/javascript">
    function getFile() {
        document.getElementById("fImageUpload").click();
        return false;
    }
    function readURL(input) {
        //alert(input);
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById("<%=Image2.ClientID%>").src = e.target.result;
                var object = e.target.result;
                object = object.replace('data:image/png;base64,', '');
                object = object.replace('data:image/png;base64,', '');
                object = object.replace('data:image/jpg;base64,', '');
                object = object.replace('data:image/gif;base64,', '');
                object = object.replace('data:image/jpeg;base64,', '');
                object = object.replace('data:image/bmp;base64,', '');
                object = object.replace('data:image/Icon;base64,', '');
                document.getElementById("<%=hdImage.ClientID%>").value = object;
            };
            reader.readAsDataURL(input.files[0]);
            return false;
        }
    }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div style="width:30%;height:130px; float:left; margin:5px;">
    <div style="float:left; width:30%;">
        <div class="form-image" >
            <img runat="server" id="Image2" class="img_border"/>
        </div>
        <div class="basic" data-average="0" data-id="1"></div>
        <div style="text-align:center; " >
            <asp:Button ID="btnUpload" Width="90" CssClass="submit" runat="server" Text="Upload"  OnClientClick="return getFile()" />
        </div>
    </div>
    
    <div style="overflow: hidden; height: 0px; width: 0px;">
         <input type="file"   id="fImageUpload" onchange="readURL(this);"/>
    </div> 
</div>
 <div style="width: 60%; float: left; margin: 10px auto;">
        <div style="text-align: center; font-size: 12pt; font-weight: bold;">
            <asp:TextBox runat="server" ID="txtMealPlanName" placeholder="MealPlan Name" MaxLength="50"
                CssClass="validate[required] textInputs "></asp:TextBox>
        </div>
        <div style="margin-top: 5px;">
            <input type="checkbox" id="Checkbox1" checked="true" runat="server" name="vehicle"
                value="1" />Share with others
        </div>
    </div>
    <div style="clear: both">
    </div>
    <div class="form-row-recipe">
        <div style="width:96%;">
                <asp:TextBox runat="server" ID="txtDescription" placeholder="Description" CssClass="textInputs "></asp:TextBox>
        </div>
    </div>   
<div id="primary-main" style="height:150px">
    <div id="primary-nav">
        <ul id="gallery">
        </ul>
        <input id="inputRecipeId" type="hidden" />
    </div>
    </div>
<div>
<div style="clear:both"></div>
    <div style="width: 100%; text-align: center;">
        <asp:Button ID="btnSave" Text="Save" runat="server"  CssClass="save_button"
            OnClick="btnSave_Click" OnClientClick="return jQuery('.form').validationEngine('validate')"
            CausesValidation="false" />
    </div>
    <script type="text/javascript">

        function initRating() {
//            if (userid != "") {
//                var recipeID = getUrlVars()["RecipeId"];
                //alert(recipeID);
                $(".basic").jRating({
                    step: true,
                    length: 5,
                    decimalLength: 1,
                    smallStarsPath: 'jquery/icons/small.png',
                    onSuccess: function (element, rate) {
                        document.getElementById("<%=ratingStar.ClientID%>").value = rate;
                    },
                    onError: function () {
                        alert('Error : please retry');
                    }
                });

//            } else {
//                $(".basic").jRating({
//                    isDisabled: true
//                });
//            }
            //return false;
        }
        
    </script>
    <asp:HiddenField id="ratingStar" runat="server"/>
    <asp:HiddenField ID="hdRecipeId" runat="server"></asp:HiddenField>
    <asp:HiddenField ID="hdImage" runat="server" />
</asp:Content>

